import { Button, Form, Input, Space, DatePicker, Select } from "antd";
import React from "react";
import { SearchOutlined } from "@ant-design/icons";
import { apiGetGoodsClassifyList } from '@/request/mallManagement'
import _ from 'lodash'
import { getDateTime3 } from '@/utils/getDate'
import TheButton from '@/components/TheButton'
import moment from "moment";

const { RangePicker } = DatePicker;

class SearchHeader extends React.Component {

  state = {
    options: []
  }
  async componentDidMount() {
    if (localStorage.getItem('searchValue')) {
      let search = JSON.parse(localStorage.getItem('searchValue'))
      console.log(search.createTimeStart)
      this.formRef.setFieldsValue({
        goodsName: search.goodsName ? search.goodsName : '',
        goodsId: search.goodsId ? search.goodsId : '',
        searchMaterialId: search.searchMaterialId? search.searchMaterialId : '',
        goodsStatus: search.goodsStatus ? search.goodsStatus : null,
        classifyId: search.classifyId ? search.classifyId : null,
        time: search.createTimeStart ? [moment(search.createTimeStart), moment(search.createTimeEnd)] : []
      })
    }
    await this.getClassify()
  }
  getClassify = async () => {
    let res = await apiGetGoodsClassifyList({ level: 2 })
    if (res.code === 0 && res.data) {
      let options = res.data.map(v => {
        return {
          value: v.goodsClassifyId,
          label: v.goodsClassifyName
        }
      })
      this.setState({ options })
    }
  }
  onFinish = values => {
    console.log(values.time)
    if (values.time && values.time.length) {
      values.createTimeStart = getDateTime3(values.time[0])
      values.createTimeEnd = getDateTime3(values.time[1])
    }
    delete (values.time)
    _.forIn(values, (v, k) => {
      if (!v) {
        delete (values[k])
      }
    })
    this.props.getValue(values)
  }
  reset = () => {
    this.formRef.setFieldsValue({
      goodsName: '',
      goodsId: '',
      searchMaterialId:'',
      goodsStatus: null,
      classifyId: null,
      time: []
    })
    localStorage.removeItem('searchValue')
    this.props.getValue({})
  };
  render() {
    return (
      <div className="search-header search-header-list">
        <Form layout={'inline'} ref={ref => this.formRef = ref} onFinish={this.onFinish}>
          <Form.Item name={"goodsName"}>
            <Input style={{ width: 120 }} suffix={<SearchOutlined />} placeholder={"商品名称"} />
          </Form.Item>
          <Form.Item name={"goodsId"} rules={[{pattern: /^[0-9]+$/, message: '只能输入数字'}]}>
            <Input style={{ width: 120 }} suffix={<SearchOutlined />} placeholder={"商品ID"} />
          </Form.Item>
          <Form.Item name={"searchMaterialId"}>
            <Input style={{ width: 120 }} suffix={<SearchOutlined />} placeholder={"物料ID"} />
          </Form.Item>
          <Form.Item name={"goodsStatus"} label="上架状态">
            <Select
              style={{ width: 120 }}
              options={[{ value: 'Y', label: '上架' }, { value: 'N', label: '下架' }, { value: 'G', label: '管理员下架' }]}
              placeholder={"上架状态"}
              allowClear
            />
          </Form.Item>
          <Form.Item name={"classifyId"} label="所属类目">
            <Select allowClear
              style={{ width: 140 }}
              options={this.state.options}
              placeholder={"所属类目"}
            />
          </Form.Item>
          <Form.Item name={"time"}>
            <RangePicker />
          </Form.Item>
          <Form.Item>
            <Space size="small" style={{ marginLeft: 10 }}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button onClick={this.reset}>重置</Button>
            </Space>
          </Form.Item>
        </Form>
        <div>
          <TheButton  type="default" size="middle" hasPermi={['mall:list:batchSynchronization']} onClick={this.props.toSync}>批量同步</TheButton>
          {/* <TheButton  type="default" size="middle" hasPermi={['mall:list:add']} onClick={this.props.toAdd}>新增商品</TheButton> */}
          <TheButton  type="default" size="middle" hasPermi={['mall:list:exportGoodsBySku']} onClick={this.props.toExport} loading={this.props.loading}>导出商品</TheButton>
        </div>

      </div>
    );
  }
}

export default SearchHeader;
